/**
 * 控制器图标
 * @param radio 画布大小比例
 * @param color 颜色
 * @returns 数据地址
 */
const ControllerImage = (radio?: number, color?: string) => {
    const r = radio || 1;
    const col = color || '#ffffff';
    const canvas = document.createElement('canvas');
    canvas.width = canvas.height = 40 * r;
    const ctx = canvas.getContext('2d')!;

    ctx.strokeStyle = "rgba(0,0,0,0)";
    ctx.miterLimit = 4;
    ctx.fillStyle = col;
    ctx.translate(0 , 1 * r);
    ctx.scale(0.039, 0.039);
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(599*r, 459.8*r);
    ctx.translate(697.9*r, 459.8*r);
    ctx.rotate(0);
    ctx.arc(0, 0, 98.9*r, -3.1415926325163688*r, 0, true);
    ctx.rotate(0);
    ctx.translate(-697.9*r, -459.8*r);
    ctx.translate(697.9*r, 459.8*r);
    ctx.rotate(0);
    ctx.arc(0, 0, 98.9*r, 0, 3.141592632516369*r, true);
    ctx.rotate(0);
    ctx.translate(-697.9*r, -459.8*r);
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(418.1*r, 429.4*r);
    ctx.lineTo(360.9*r, 429.4*r);
    ctx.bezierCurveTo(358.3*r, 429.4*r, 356.2*r, 427.3*r, 356.2*r, 424.7*r);
    ctx.lineTo(356.2*r, 366.6*r);
    ctx.bezierCurveTo(356.2*r, 364*r, 354.1*r, 361.9*r, 351.5*r, 361.9*r);
    ctx.lineTo(299*r, 361.9*r);
    ctx.bezierCurveTo(296.4*r, 361.9*r, 294.3*r, 364*r, 294.3*r, 366.6*r);
    ctx.lineTo(294.3*r, 424.7*r);
    ctx.bezierCurveTo(294.3*r, 427.3*r, 292.2*r, 429.4*r, 289.6*r, 429.4*r);
    ctx.lineTo(231.5*r, 429.4*r);
    ctx.bezierCurveTo(228.9*r, 429.4*r, 226.8*r, 431.5*r, 226.8*r, 434.1*r);
    ctx.lineTo(226.8*r, 485.7*r);
    ctx.bezierCurveTo(226.8*r, 488.3*r, 228.9*r, 490.4*r, 231.5*r, 490.4*r);
    ctx.lineTo(289.6*r, 490.4*r);
    ctx.bezierCurveTo(292.2*r, 490.4*r, 294.3*r, 492.5*r, 294.3*r, 495.1*r);
    ctx.lineTo(294.3*r, 553.2*r);
    ctx.bezierCurveTo(294.3*r, 555.8*r, 296.4*r, 557.9*r, 299*r, 557.9*r);
    ctx.lineTo(351.5*r, 557.9*r);
    ctx.bezierCurveTo(354.1*r, 557.9*r, 356.2*r, 555.8*r, 356.2*r, 553.2*r);
    ctx.lineTo(356.2*r, 496*r);
    ctx.bezierCurveTo(356.2*r, 493.4*r, 358.3*r, 491.3*r, 360.9*r, 491.3*r);
    ctx.lineTo(418.1*r, 491.3*r);
    ctx.bezierCurveTo(420.7*r, 491.3*r, 422.8*r, 489.2*r, 422.8*r, 486.6*r);
    ctx.lineTo(422.8*r, 434.1*r);
    ctx.bezierCurveTo(422.8*r, 431.5*r, 420.7*r, 429.4*r, 418.1*r, 429.4*r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(174.3*r, 797.7*r);
    ctx.bezierCurveTo(169.7*r, 797.7*r, 165*r, 797.4*r, 160.4*r, 796.8*r);
    ctx.bezierCurveTo(141.2*r, 794.3*r, 122.8*r, 786.7*r, 107.2*r, 774.8*r);
    ctx.bezierCurveTo(91.6*r, 762.9*r, 79.4*r, 747.1*r, 71.9*r, 729.2*r);
    ctx.bezierCurveTo(63.9*r, 710.1*r, 61.6*r, 689.1*r, 65.1*r, 668.2*r);
    ctx.lineTo(106.7*r, 419.7*r);
    ctx.bezierCurveTo(115.6*r, 366.4*r, 143.3*r, 317.8*r, 184.5*r, 282.9*r);
    ctx.bezierCurveTo(225.7*r, 248*r, 278.2*r, 228.8*r, 332.3*r, 228.8*r);
    ctx.lineTo(688.7*r, 228.8*r);
    ctx.bezierCurveTo(742.7*r, 228.8*r, 795.2*r, 248*r, 836.5*r, 282.9*r);
    ctx.bezierCurveTo(877.7*r, 317.8*r, 905.4*r, 366.4*r, 914.3*r, 419.7*r);
    ctx.lineTo(955.9*r, 668.2*r);
    ctx.bezierCurveTo(959.4*r, 689.1*r, 957*r, 710.2*r, 949.1*r, 729.2*r);
    ctx.bezierCurveTo(941.6*r, 747.1*r, 929.4*r, 762.8*r, 913.8*r, 774.8*r);
    ctx.bezierCurveTo(898.2*r, 786.7*r, 879.8*r, 794.3*r, 860.6*r, 796.8*r);
    ctx.bezierCurveTo(840.1*r, 799.5*r, 819.2*r, 796.2*r, 800*r, 787.3*r);
    ctx.lineTo(798.5*r, 786.6*r);
    ctx.lineTo(635.4*r, 677.3*r);
    ctx.bezierCurveTo(559.5*r, 626.3*r, 461.4*r, 626.3*r, 385.4*r, 677.3*r);
    ctx.lineTo(222.5*r, 786.6*r);
    ctx.lineTo(221*r, 787.3*r);
    ctx.bezierCurveTo(206.2*r, 794.1*r, 190.2*r, 797.7*r, 174.3*r, 797.7*r);
    ctx.closePath();
    ctx.moveTo(332.2*r, 270.8*r);
    ctx.bezierCurveTo(240.6*r, 270.8*r, 163.2*r, 336.3*r, 148.1*r, 426.7*r);
    ctx.lineTo(106.5*r, 675.2*r);
    ctx.bezierCurveTo(102.2*r, 700.9*r, 112*r, 725.6*r, 132.7*r, 741.4*r);
    ctx.bezierCurveTo(153*r, 756.9*r, 178.8*r, 760*r, 202.1*r, 749.8*r);
    ctx.lineTo(362.1*r, 642.4*r);
    ctx.bezierCurveTo(406.1*r, 612.8*r, 457.4*r, 597.2*r, 510.5*r, 597.2*r);
    ctx.bezierCurveTo(563.6*r, 597.2*r, 614.8*r, 612.8*r, 658.9*r, 642.4*r);
    ctx.lineTo(818.9*r, 749.8*r);
    ctx.bezierCurveTo(842.2*r, 760*r, 868*r, 756.8*r, 888.3*r, 741.4*r);
    ctx.bezierCurveTo(909*r, 725.6*r, 918.8*r, 700.8*r, 914.5*r, 675.2*r);
    ctx.lineTo(872.9*r, 426.7*r);
    ctx.bezierCurveTo(857.8*r, 336.4*r, 780.3*r, 270.8*r, 688.8*r, 270.8*r);
    ctx.lineTo(332.2*r, 270.8*r);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();

    return canvas.toDataURL('image/png');
}


export { ControllerImage };